<script setup lang="ts">
import { getKnowledgeList } from '@/services/consult'
import KnowledgeCard from './KnowledgeCard.vue'
import type { KnowledgeType } from '@/types/consult'
import { ref } from 'vue'
import { onMounted } from 'vue'
import type { KnowledgeList } from '@/types/consult'
const props = defineProps<{
  type: KnowledgeType
}>()
const current = ref<number>(1)
const pageSize = 10
const list = ref<KnowledgeList>([])
// const getList = async () => {
//   const { data } = await getKnowledgeList(props.type, current.value, pageSize)
//   console.dir(data)
//   list.value = data.rows
// }
// onMounted(() => {
//   getList()
// })
// 翻页加载
const finished = ref(false)
const loading = ref(false)
const onload = async () => {
  const { data } = await getKnowledgeList(props.type, current.value, pageSize)
  //   拼接当前页和之前请求的数据
  list.value = [...list.value, ...data.rows]
  // 添加当前页码，下次发请求加载下一页
  current.value++
  // 加载状态结束
  loading.value = false
  //   如果数据请求完毕，将finished修改为true
  if (current.value > data.pageTotal) {
    finished.value = true
  }
}
</script>

<template>
  <div class="knowledge-list">
    <van-list
      @load="onload"
      :finished="finished"
      finished-text="人家也是有底线的"
      v-model:loading="loading"
    >
      <knowledge-card :item="item" v-for="item in list" :key="item.id"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
